<template>
  <div v-if="!valueType">
    组件开发中
  </div>
  <el-cascader v-else-if="valueType === 'cascader'" v-bind="mergeProps" />

  <component v-else :is="`el-${valueType}`" v-bind="mergeProps">
    <template v-if="valueType === 'select'">
      <el-option v-for="op in options" :key="op.value" :label="op.label" :value="op.value"></el-option>
    </template>
  </component>
</template>

<script lang="ts">
export default {
  name: "FormControls",
  inheritAttrs: false,
}
</script>

<script setup lang="ts">
import { FormControlProps } from "./types";

type EventType = {
  [key: string]: (...args: any[]) => {}
}

const attrs = useAttrs()

const defaultProps = {
  clearable: true
}
// 默认值
const props = withDefaults(defineProps<FormControlProps>(), {
  valueType: 'input',
  options: () => ([]),
});
function getFieldProps() {
  const events: EventType = {}
  if (props.on && Object.prototype.toString.call(props.on) === "[object Object]") {
    const names = Object.keys(props.on)
    names.forEach((name: string) => {
      if (typeof props.on![name] === "function") {
        const fnName = name.slice(0, 1).toLocaleUpperCase() + name.slice(1)
        events[`on${fnName}`] = props.on![name]
      }
    })
  }
  return {
    ...defaultProps,
    ...attrs,
    ...events,
  };
}
const mergeProps = computed(() => {
  return getFieldProps() 
})
</script>